<template>
  <!--  导出文件对话框  -->
  <el-dialog
      :title="title || '导出'"
      :visible="true"
      :before-close="handleCloseExportDialog">

    <el-form :inline="true"  class="demo-form-inline" size="small">
      <el-form-item label="文件名">
        <el-input v-model="fileName" placeholder="输入导出文件名称"></el-input>
      </el-form-item>
      <el-form-item label="导出类型">
        <el-select v-model="fileType" placeholder="请选择导出类型">
          <el-option label="csv" value="csv"></el-option>
          <el-option label="xlsx" value="xlsx"></el-option>
          <el-option label="xls" value="xls"></el-option>
          <el-option label="xlsb" value="xlsb"></el-option>
          <el-option label="pdf" value="pdf"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCloseExportDialog">取 消</el-button>
      <el-button type="primary" @click="handlerExport">确 定</el-button>
    </span>

    <el-table v-if="fileType==='pdf'" :data="fileData" stripe v-loading="tableLoading" element-loading-text="拼命加载中" ref="tablesRef" id="tablesRef" >
      <el-table-column v-for="(header,index) in headers" :key="index" :prop="header.key" :label="header.label"></el-table-column>
    </el-table>


  </el-dialog>
</template>

<script >

import { exportCsv, exportXLsx, exportPdf ,importXlsx} from '@/utils/importExport'

/*
主要传 数据和销毁回调函数
@closeExportDialog="exportDialog.dialogVisible = false"
:datas="[]"
 */

export  default {
  name :"FileExport",
  props:{
    headers:{
      type:Array,
      /*
      *[{key:'name',label:'姓名'}]
      * */
    },
    datas:{
      type:Array,
      default() {
        return [];
      }
    },
    title:String
  },
  data(){
    return {
      dialogVisible:false,
      fileName:'下载文件',
      fileType:'xlsx',
      fileData:[],
      tableLoading:true
    }
  },
  mounted() {
    if (this.title){
     this.fileName= this.title
    }
    this.fileData=JSON.parse(JSON.stringify(this.datas))
    this.tableLoading = false
  },
  methods:{
    handleCloseExportDialog(){
      this.$emit('closeExportDialog')
    },
    getTimeFileName(){
      return (this.fileName + new Date().getTime())
    },
    // 导出点击
    handlerExport() {
      this.onExport()
      this.handleCloseExportDialog()
    },
    onExport() {
      this.exportLoading = true;
      if (this.fileType=== 'csv') {
        // 导出csvW
        exportCsv(this.fileData, this.headers, this.getTimeFileName());
      } else if (this.fileType=== 'xls' || this.fileType=== 'xlsb' || this.fileType=== 'xlsx') {
        // 导出excel
        exportXLsx(this.fileData, this.headers, this.fileType, this.getTimeFileName());
      } else if (this.fileType=== 'pdf') {
        // 文件名称
        exportPdf(document.querySelector('#tablesRef'), this.getTimeFileName());
      }
      setTimeout(() => {
        this.exportLoading = false;
      }, 500)

      console.log("导出成功")
    },
  }
}

</script>



<style scoped >

</style>